<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          
          <a-col :md="4" :sm="6">
            <a-form-item label="用户昵称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-input placeholder v-model="queryParam.nickname"></j-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="4" :sm="6">
            <a-form-item label="用户ID" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-input placeholder v-model="queryParam.userId"></j-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="4" :sm="6">
            <a-form-item label="学校名称 " :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-input placeholder v-model="queryParam.schoolName"></j-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="4" :sm="6">
            <a-form-item label="手机号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-input placeholder v-model="queryParam.phone"></j-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->



    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap" @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="logo" />
          </div>
        </template>
        <!-- <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template> -->


        <span slot="action" slot-scope="text, record">
<!--          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" /> -->
          <!-- 用户状态,1:正常,2:冻结 -->
          <a v-if="record.status == 1" @click="frozen(record)">冻结</a>
          <a v-else @click="unseal(record)">解封</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多
              <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="getUserInfo(record.id)">详情</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <!-- ///////////  用户详情对话框 开始 -->
    <a-modal v-model="visible" title="用户详情" @ok="handleOk">

      <p>头像: &nbsp;<a-avatar :src="this.userInfo.avatar" />
      </p>
      <p>昵称: &nbsp;{{userInfo.nickname}}</p>
      <p v-if="this.userInfo.sex == '1'">性别: &nbsp; 男</p>
      <p v-if="this.userInfo.sex == '2'">性别: &nbsp; 女</p>
      <p>积分: &nbsp; {{userInfo.integralNum}}</p>
      <p>粉丝数量: &nbsp; {{userInfo.fansNums}}</p>
      <p>关注数量: &nbsp; {{userInfo.attentionNums}} </p>
      <p>好友数量: &nbsp; {{userInfo.friendNums}} </p>
      <p>动态数量: &nbsp; {{userInfo.dynaicNums}} </p>
      <p>真实姓名: &nbsp; {{userInfo.actualName}} </p>
      <p>身份证号码: &nbsp; {{userInfo.idNumber}} </p>
      <p>手机号码: &nbsp; {{userInfo.phone}} </p>
      <p>证件照片: &nbsp; <img :src="this.userInfo.documentImg" /> </p>
      <p>学历: &nbsp; {{userInfo.degreeName}} </p>
      <p>学校: &nbsp; {{userInfo.schoolName}} </p>
      <p>专业: &nbsp; {{userInfo.profession}} </p>
      <p>学院: &nbsp; {{userInfo.college}} </p>
      <p>时间: &nbsp; {{userInfo.admissionDate}} </p>
      <p v-if="this.userInfo.myCreateClub != null">创建社团: &nbsp; <br/>
          头像:&nbsp;<a-avatar shape="square" :src="getAvatarView(userInfo.myCreateClub.communityLogo)" icon="logo" />  <br />
          名称:&nbsp;{{userInfo.myCreateClub.communityName}} <br />
          所属学校:&nbsp;{{userInfo.myCreateClub.schoolName}} <br />
      </p>
      
      <!-- <p v-if="this.userInfo.myJoinClub != null">加入社团: &nbsp; <br/>
        <col v-for="club in myJoinClub">
          头像:{{club.avatar}} <br />
          名称:{{club.name}} <br />
          所属学校:{{club.schoolName}} <br />
        </col>
      </p> -->
      <p v-if="this.userInfo.authenticated == '2'">认证: &nbsp; 未认证 </p>
      <p v-if="this.userInfo.authenticated == '1'">认证: &nbsp; 已认证 </p>
    </a-modal>
    <!-- 用户详情对话框 结束 -->

    <app-user-modal ref="modalForm" @ok="modalFormOk"></app-user-modal>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {
    putAction,
    getFileAccessHttpUrl,
    getAction
  } from '@/api/manage'
  import AppUserModal from './modules/AppUserModal'
  import JInput from '@comp/jeecg/JInput'


  export default {
    name: "AppUserList",
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      AppUserModal,
      JInput
    },
    data() {
      return {
        description: 'App用户表管理页面',
        userInfo: {},
        visible: false,
        // 表头
        columns: [{
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function(t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '头像',
            align: "center",
            dataIndex: 'avatar',
            width: 120,
            scopedSlots: {
              customRender: 'avatarslot'
            }
          },
          /*          {
                      title: '登陆账号',
                      align: "center",
                      dataIndex: 'userName'
                    }, */
          {
            title: '昵称',
            align: "center",
            dataIndex: 'nickname'
          },
          {
            title: 'ID',
            align: "center",
            dataIndex: 'userId'
          },
          {
            title: '性别',
            align: "center",
            dataIndex: 'sex_dictText'
          },
          {
            title: '所属学校',
            align: "center",
            dataIndex: 'schoolName'
          },
          {
            title: '手机号',
            align: "center",
            dataIndex: 'phone'
          },
          {
            title: '积分数量',
            align: "center",
            dataIndex: 'integralNum'
          },
          // {
          //   title:'密码',
          //   align:"center",
          //   dataIndex: 'password'
          // },

          /* {
            title: '所属社团',
            align: "center",
            dataIndex: 'clubName'
          }, */
          /*          {
                      title: '真实姓名',
                      align: "center",
                      dataIndex: 'actualName'
                    }, */
          // {
          //   title:'md5密码盐',
          //   align:"center",
          //   dataIndex: 'salt'
          // },
          // {
          //   title: '生日',
          //   align: "center",
          //   dataIndex: 'birthday'
          // },
          // {
          //   title: '电子邮箱',
          //   align: "center",
          //   dataIndex: 'email'
          // },
          // {
          //   title:'第三方登陆唯一标示',
          //   align:"center",
          //   dataIndex: 'thirdId'
          // },
          // {
          //   title:'第三方登陆类型',
          //   align:"center",
          //   dataIndex: 'thirdType'
          // },
          // {
          //   title:'删除',
          //   align:"center",
          //   dataIndex: 'delFlag'
          // },
          {
            title: '用户状态',
            align: 'center',
            dataIndex: 'status_dictText'
          },
          {
            title: '学生认证',
            align: 'center',
            dataIndex: 'authenticated_dictText'
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime',
            customRender: function(text) {
              return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
            },
          },

          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 147,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        url: {
          list: "/appUser/appUser/list",
          delete: "/appUser/appUser/delete",
          deleteBatch: "/appUser/appUser/deleteBatch",
          exportXlsUrl: "/appUser/appUser/exportXls",
          importExcelUrl: "appUser/appUser/importExcel",

        },
        dictOptions: {},
      }
    },
    created() {},
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      getAvatarView: function(avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      initDictConfig() {},
      frozen(record) {
        this.axios.get('/appUser/appUser/frozenOrUnseal', {
          params: {
            userId: record.id,
            status: '2'
          }
        }).then((res) => {
          console.log(res);
          this.loadData();
        })
      },
      unseal(record) {
        record.status = '1';
        this.axios.get('/appUser/appUser/frozenOrUnseal', {
          params: {
            userId: record.id,
            status: '1'
          }
        }).then((res) => {
          console.log(res);
          this.loadData();
          // this.initIntegralData();
        })
      },
      getUserInfo(userId) {
        
        this.userInfo = {};
        
        this.axios.get('/appUser/appUser/getUserInfo', {
          params: {
            userId: userId
          }
        }).then((res) => {
          this.userInfo = res.result;
        });

        this.visible = true;
      },
      handleOk(e) {
        this.userInfo = {};
        this.visible = false;
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
